import React, { memo, useState } from 'react';
import { Table } from 'antd';
import {
    // ArrowDownOutlined,
    MinusSquareOutlined,
    PlusSquareOutlined
} from '@ant-design/icons';
import dataSource from './data1'

function TableComponents(props) {

    const [expandKeys, setExpandKeys] = useState(dataSource.map(item => item.key))
    const columns = [
        {
            title: '省份',
            dataIndex: 'analysisIndex',
            key: 'analysisIndex',
            width: '12%'
        },
        {
            title: '模块名称',
            dataIndex: 'analysisIndex2',
            key: 'analysisIndex2',
            width: '18%'
        },
        {
            title: '2022/3/1',
            dataIndex: 'date1',
            key: 'date1',
            width: '14%',
        },
        {
            title: '2022/3/2',
            dataIndex: 'date2',
            key: 'date2',
            width: '14%',
        },
        {
            title: '2022/3/3',
            dataIndex: 'date3',
            key: 'date3',
            width: '14%',
        },
        {
            title: '2022/3/4',
            dataIndex: 'date4',
            key: 'date4',
            width: '14%',
        },
        {
            title: '2022/3/5',
            dataIndex: 'date5',
            key: 'date5',
            width: '14%',
        },

    ]
    return (
        <React.Fragment>
            <Table
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                expandable={{
                    indentSize: 0,
                    expandedRowKeys: expandKeys,
                    expandIcon: ({ expanded, onExpand, record }) => {
                        if (!record.children) return
                        return expanded ? (
                            <MinusSquareOutlined onClick={e => onExpand(record, e)} />
                        ) : (
                            <PlusSquareOutlined onClick={e => onExpand(record, e)} />
                        )
                    },
                    onExpandedRowsChange: (expandedRows) => {
                        setExpandKeys(expandedRows)
                    }
                }}
            />
        </React.Fragment>
    );
}

export default memo(TableComponents);